<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="user-scalable=no">
  <meta name="theme-color" content="#f3f3f3">
  <meta name="msapplication-navbutton-color" content="#f3f3f3">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="Wayback">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="#f3f3f3">
  <meta name="robots" content="noindex,nofollow">
  <meta name="referrer" content="no-referrer">
  <meta name="google" content="notranslate">
  <meta name="X-Content-Type-Options" content="nosniff">
  <title>Wayback Archiver</title>
  <link rel="manifest" href="{{ route "manifest" "filename" "manifest.json" }}" crossorigin="use-credentials" />
  <link rel="icon" href="{{ route "favicon" "filename" "favicon.ico" }}">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ route "icon" "filename" "favicon-16.png" }}">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ route "icon" "filename" "favicon-32.png" }}">
  <link rel="icon" type="image/png" sizes="128x128" href="{{ route "icon" "filename" "icon-128.png" }}">
  <link rel="icon" type="image/png" sizes="192x192" href="{{ route "icon" "filename" "icon-192.png" }}">
  <link rel="apple-touch-icon" sizes="120x120" href="{{ route "icon" "filename" "icon-120.png" }}">
  <link rel="apple-touch-icon" sizes="152x152" href="{{ route "icon" "filename" "icon-152.png" }}">
  <link rel="apple-touch-icon" sizes="167x167" href="{{ route "icon" "filename" "icon-167.png" }}">
  <link rel="apple-touch-icon" sizes="180x180" href="{{ route "icon" "filename" "icon-180.png" }}">
  <style>
    :root {
      --c-light-text: #333;
      --c-light-textarea: #222;
      --c-light-background: #f7f7f7;
      --c-light-form-background: #fff;

      --c-dark-text: #fcfcfc;
      --c-dark-textarea: #b4c9d4;
      --c-dark-background: #222222ed;
      --c-dark-form-background: #3e3e3e;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      min-height: 100%;
      overflow: hidden;
    }

    html {
      background-color: var(--c-light-background);
      -webkit-transition: color 300ms, background-color 300ms;
      -o-transition: color 300ms, background-color 300ms;
      transition: color 300ms, background-color 300ms;
      overflow: -moz-scrollbars-none;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    html::-webkit-scrollbar {
      width: 0 !important
    }

    @media (prefers-color-scheme: light) {
      html {
        background-color: var(--c-light-background);
        color: var(--c-light-text);
      }
    }

    @media (prefers-color-scheme: dark) {
      html {
        background-color: var(--c-dark-background);
        color: var(--c-dark-text);
      }
    }

    body {
      font: 100% / 1.5 "Open Sans", Helvetica, Arial, sans-serif;
      font-size: 1rem;
      -webkit-tap-highlight-color: transparent;
    }

    ::-webkit-scrollbar {
      background: transparent;
    }

    a {
      border: 1px blue;
      color: #999;
      width: 100%;
      float: left;
      text-decoration: none;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-transition: background-color 0.15s ease 0s;
      -o-transition: background-color 0.15s ease 0s;
      transition: background-color 0.15s ease 0s;
    }

    a:-webkit-any-link {
      text-decoration: none;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      float: left;
    }

    a:hover {
      color: #524d4b;
    }

    ::-moz-selection {
      background-color: #cfcfcfb4;
    }

    ::selection {
      background-color: #cfcfcfb4;
    }

    @media (prefers-color-scheme: dark) {
      ::-moz-selection {
        background-color: #cfcfcf30;
      }

      ::selection {
        background-color: #cfcfcf30;
      }
    }

    .wrapper {
      position: absolute;
      margin: auto;
      width: 99%;
      max-width: 630px;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 12;
      overflow: hidden;
    }

    @media only screen and (max-width: 1012px) {
      .wrapper {
        max-width: 100%;
      }
    }

    .form {
      border-radius: 4px;
      display: block;
      position: relative;
      background-color: var(--c-light-form-background);
      border: 1px solid #00000026;
      -webkit-box-shadow: 0 2px 3px #0000000f;
      box-shadow: 0 2px 3px #0000000f;
      margin: 0;
      padding: 0;
    }

    @media (prefers-color-scheme: dark) {
      .form {
        background-color: var(--c-dark-form-background);
        color: var(--c-dark-text);
      }
    }

    .box {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: .55rem;
    }

    textarea {
      visibility: visible;
      font-family: "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
      color: var(--c-light-textarea);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 1.1em;
      font-weight: normal;
      display: flex;
      background: none;
      outline: none;
      border: none;
      width: 100%;
      height: 8em;
      z-index: 1;
      resize: none;
      text-align: justify;
      justify-content: center;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      grid-column-start: 1;
      grid-column-end: 3;
    }

    @media only screen and (max-width: 1012px) {
      textarea {
        height: 17em;
        font-size: 1.25em;
        -webkit-text-fill-color: initial;
        line-height: 30px;
        border-right-width: 24px;
        padding: 20px;
        padding-bottom: 5.5rem;
      }

      textarea::-webkit-input-placeholder {
        font-size: 2em;
      }

      textarea::-moz-placeholder {
        font-size: 2em;
      }

      textarea:-ms-input-placeholder {
        font-size: 2em;
      }

      textarea::-ms-input-placeholder {
        font-size: 2em;
      }

      textarea::placeholder {
        font-size: 2em;
      }
    }

    @media (prefers-color-scheme: dark) {
      textarea {
        color: var(--c-dark-textarea);
      }
    }

    input[type="submit"] {
      visibility: visible;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font: normal normal normal 20px/1 FontAwesome;
      font-style: normal;
      font-weight: normal !important;
      font-variant: normal;
      text-rendering: auto;
      text-transform: none;
      text-decoration: none !important;
      cursor: pointer;
      background: transparent;
      text-align: center;
      border: none;
      z-index: 2;
      outline: none;
      font-size: 1.25em;
      min-height: 1.8em;
      line-height: 1.5;
      bottom: .2em;
      height: 1.8em;
      width: 1.8em;
      border-radius: 50%;
      display: flex;
      color: #0a0a08;
      background-color: #dee3e79c;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-font-smoothing: subpixel-antialiased;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    input[type="submit"]:hover {
      -webkit-transition-duration: 0.4s;
      -o-transition-duration: 0.4s;
      transition-duration: 0.4s;
      background-color: #dee3e7;
    }

    input#wayback {
      grid-row-start: 2;
      grid-column-start: 2;
      justify-self: end;
      background-image: url({{ route "icon" "filename" "send.svg" }});
    }

    input#playback {
      grid-row-start: 2;
      grid-column-start: 1;
      background-image: url({{ route "icon" "filename" "search.svg" }});
    }

    @media only screen and (max-width: 1012px) {
      input[type="submit"] {
        font-size: 2.45em;
      }
    }

    .archived {
      position: relative;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 65vh;
      background: #f5f5f5;
      margin: 0.5em;
      border-bottom: 1px solid #00000040;
    }

    @media only screen and (max-width: 1012px) {
      .archived {
        font-size: 2em;
        padding: 3.5px;
        bottom: .86rem;
      }
    }

    ul.row {
      width: 100%;
      padding: 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      list-style: none;
      list-style-type: none;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      flex-direction: row;
      margin: 10px 0;
      text-align: left;
      white-space: nowrap;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      transition: all .5s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    @media only screen and (max-width: 1012px) {
      ul.row {
        margin: 15px 0;
      }
    }

    .src {
      z-index: 1;
      margin: 0;
      text-align: left;
      width: 35%;
      margin-right: .85rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (prefers-color-scheme: dark) {
      .src {
        color: #ccc;
      }
    }

    .dst {
      flex: auto;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      -webkit-flex: 0 1 65%;
      -ms-flex: 0 1 65%;
      width: 65%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }

    .add-button {
      display: none;
      position: fixed;
      top: 5px;
      left: 5px;
      height: 35px;
      text-align: center;
    }

    .privacy {
      position: relative;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      -webkit-transition: all;
      -o-transition: all;
      transition: all;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border: 0px solid;
      min-height: auto;
      min-width: auto;
      padding: 20px 60px 8px 60px;
    }

    .privacy > .read {
      height: 14px;
      text-align: center;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      min-width: auto;
      min-height: auto;
      font-size: 14px;
      line-height: 14px;
      word-spacing: 0px;
    }

    @media only screen and (max-width: 1012px) {
      .privacy {
        padding: calc(.875rem*2);
      }

      .privacy > .read {
        font-size: 1.25rem;
      }
    }

    .read > a {
      float: none;
      text-decoration: underline;
      cursor: pointer;
    }
  </style>
  <script src="{{ route "javascript" "name" "index" }}" defer></script>
</head>

<body>
  <div class="wrapper">
    <button class="add-button">Add to home screen</button>
    <div class="archived" id="archived">
      {{- range $i, $collect := .Collect -}}
      <ul class="row">
        <li class="src" title="{{ $collect.Src }}">{{ $collect.Src }}</li>
        <li class="dst" title="{{ $collect.Dst }}"><a href="{{ $collect.Dst }}" target="blank">{{ $collect.Dst }}</a></li>
      </ul>
      {{end}}
    </div>
    <div class="form">
      <form method="post">
        <div class="box">
          <textarea id="text" name="text" value="" autocapitalize="off" autocorrect="off" spellcheck="false"
            placeholder="e.g. https://www.eff.org https://www.wikipedia.org" autofocus></textarea>
          <input type="submit" id="playback" name="action" value="" accesskey="p" formaction="/playback">
          <input type="submit" id="wayback" name="action" value="" accesskey="s" formaction="/wayback">
        </div>
      </form>
    </div>
    {{if not .PrivacyURL}}
    <div style="padding-bottom: .375rem;"></div>
    {{end}}
    {{if .PrivacyURL}}
    <div class="privacy">
      <span class="read">By messaging Wayback Archiver, you have read our <a href="{{- .PrivacyURL -}}" target="_blank" rel="noreferrer">Privacy Policy</a>.</span>
    </div>
    {{end}}
  </div>
</body>

</html>
